<template>
    <div id='' class='base_center' ref="centerBox">
        <div class="fd" v-if="show"></div>
        <div class="header">
            <div class="inturn"></div>
            <div class="hItem" v-for="(item,index) in header" :key="index">
                <Checkbox v-model="rowCheck['rowCheck-'+item]" @on-change="rowChange(item)">{{item}}</Checkbox>
            </div>
        </div>
        <div class="row" v-for="(rItem,rindex) in dataList" :key="rindex">
            <div class="leftItem">
                <Checkbox v-model="colCheck['colCheck-'+rindex]" @on-change="colChange(rindex)">{{left[rindex]}}</Checkbox>
            </div>
            <div v-for="(citem,cindex) in rItem" :key="cindex" :class="citem.bdcdyid==''?'col wu':citem.ghyt=='10'?'col dj':'col wdj'" @click="colSelect(citem)">
                <div class="select_shade" v-if="citem.selected"></div>
                <BaseLabelState v-if="citem.bdcdyid" :itemData="citem" />
                <div class="gauge_outfit" v-if="citem.bdcdyid">
                    <div class="name">房号：</div>
                    <div class="value">{{citem.fh}}</div>
                </div>
                <template v-if="citem.bdcdyid">
                    <div class="co_item" v-for="(coItem,coIndex) in center" :key="coIndex" v-if="isIn(coItem.label)">
                        <span>{{coItem.label}}：</span>
                        <span>{{citem[coItem.key]}}</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import BaseLabelState from "./BaseLabelState.vue";
import { mapState } from 'vuex'
export default {
    name: '',
    props: ['header', 'list', 'left', 'center'],
    data() {
        return {
            hisTop: 0,
            hisLeft: 0,
            show: false,
            rowCheck: {},
            colCheck: {},
            dataList: [],
        };
    },
    components: { BaseLabelState },
    computed: {
        ...mapState('extend/houseContent', ['checkedInfo'])
    },
    beforeMount() { },
    created() {
    },
    mounted() {
        let _this = this
        this.$refs.centerBox.addEventListener('scroll', function (e) {
            if (_this.hisTop !== e.target.scrollTop) {
                if (e.target.scrollTop > 48) {
                    _this.show = true
                } else {
                    _this.show = false
                }
            }
            if (_this.hisLeft !== e.target.scrollLeft) {
                // console.log('%o', '横向')
            }
            _this.hisTop = e.target.scrollTop
            _this.hisLeft = e.target.scrollLeft
        }, true);
    },
    filters: {
    },
    methods: {
        isIn(value) {
            return this.checkedInfo.some(item => item === value)
        },
        colSelect(event) {
            let newlist = icu.util.deepClone(this.dataList)
            for (let i = 0; i < newlist.length; i++) {
                const element = newlist[i];
                for (let j = 0; j < element.length; j++) {
                    const je = element[j];
                    if (je.bdcdyid == event.bdcdyid) {
                        if (je['selected'] !== undefined) {
                            je['selected'] = !je['selected']
                        } else {
                            je['selected'] = true
                        }
                    }
                }
            }
            this.dataList = newlist
        },
        rowChange(event) {
            let _index = event * 1;
            let newlist = icu.util.deepClone(this.dataList)
            for (let i = 0; i < newlist.length; i++) {
                const element = newlist[i];
                if (element[_index - 1].bdcdyid !== '') {
                    element[_index - 1]['selected'] = this.rowCheck['rowCheck-' + event]
                }
            }
            this.dataList = newlist
        },
        colChange(event) {
            let _index = event * 1;
            let newlist = icu.util.deepClone(this.dataList)
            for (let j = 0; j < newlist[_index].length; j++) {
                const je = newlist[_index][j];
                if (je.bdcdyid !== '') {
                    je['selected'] = this.colCheck['colCheck-' + _index]
                }
            }
            this.dataList = newlist
        }
    },
    watch: {
        list() {
            this.dataList = icu.util.deepClone(this.list)
        },
        header() {
            for (let i = 0; i < this.header.length; i++) {
                const element = this.header[i];
                this.rowCheck['rowCheck-' + element] = false
            }
        },
        left() {
            for (let i = 0; i < this.left.length; i++) {
                this.colCheck['colCheck-' + i] = false
            }
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../common.less");
@import url("./style/common.less");
@import url("./style/center.less");
</style>